<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${article.title}</title>
<meta name="keywords" content="${article.keywords?default("")}" />
<meta name="description" content="${article.description?default("")}" />
<#include "common.ftl">

<script type="text/javascript" src="${base}/template/js/jquery.blockUI.js"></script>
<script type="text/javascript" src="${base}/template/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="${base}/template/js/additional-methods.min.js"></script>
<script type="text/javascript" src="${base}/template/js/jquery.tmpl.min.js"></script>
<script type="text/javascript">
 var loadComments=function(url,params){
	    $.ajax({
	    "url":url,
	    "type":"get",
	    "global":false,
	    "data":params,
	    "success":function(msg){
	      $(".replay_content").html(msg);
	     }
	    });
 }
 $(function(){
  $(document).ajaxStart(function() {
		$.blockUI({
			css : {
				border : 'none',
				padding : '15px',
				backgroundColor : '#000',
				'-webkit-border-radius' : '10px',
				'-moz-border-radius' : '10px',
				opacity : .5,
				color : '#fff'
			}
		});
   });
  
   $("form[name='replay']").validate({
		rules: {
			"member.name": "required",
			"member.email": {
			  required:true,
			  email:true
			},
			"content":"required"
		},
		messages: {
			"member.name": "Please enter your name",
			"member.email": {
				required: "Please enter a email",
				email: "Please valid your email"
			},
			"content": "Please enter your comments"
		}
	});
   
  $("input[name='sub']").click(function(){
      var $form=$("form[name='replay']");
      if(!$form.valid()){
        return;
      }
      $.post("${base}${search}/comment/${article.id}",$form.serialize(),function(msg){
        $.unblockUI();
        $form.find("input[name='member.name'],input[name='member.email'],textarea").val("");        
        if(!$(".replay_content").html()){
           loadComments("${base}${search}/comment/${article.id}");          
        }else{
          var data={"name":msg.member.name,"content":msg.content,"createDate":msg.createDate}
          $("#comment").tmpl(data).prependTo($(".replay_content .comment ul"));
        }
      });        
   });
   loadComments("${base}${search}/comment/${article.id}");
 });
</script>
</head>
<body>
	<div class="wrapper_2">
       <#include "header.ftl">	
		<!--end:header-->
	</div>
    <div class="wrapper_2">
    	<div class="sitemap">
        	<a href="/">Home</a> > <a href="javascript:void(0);">${article.title}</a>
        </div>
        <div class="clear"></div>
    </div>
    <div class="wrapper_2">
        <div class="floatr" style="width:160px;height:600px;">
              <img src="${base}/template/images/img_ad_v.png" width="160" height="600" />
        </div>
		<!--end:ad_right-->
        
		<div class="floatl">
        	<div class="menu2">
            	<h1 class="menu_title">User Review</h1>
                <div class="catelog_shaixuan_artical">
                	<ul>
                       <#assign n=topArticles?size>
                	   <#list 0..(n-1) as i>
            	        <#assign topArticle=topArticles[i]>
                	    <li><a href="${base}/article/${encodeUrl(topArticle.title)}.html">${i+1}. <#if (topArticle.title?length gt 70)>${topArticle.title[0..70]?default("")}<#else>${topArticle.title}</#if></a></li>
                       </#list>
                    </ul>
                    <div><a href="${base}/article/1.html" class="gray999">more...</a></div>
                </div>
            </div>
            <!--end:menu-->
            <div class="menu2">
            	<h1 class="menu_title">By Keywords</h1>
                <div class="catelog_shaixuan">
                	<ul>
                    	<li><input type="text" class="text02"/><input type="button" value="Go" class="btn_go"></li>
                    </ul>
                </div>
            </div>
            <!--end:menu-->        	
		</div>
		<!--end:menu catelog_shaixuan floatl-->
        
		<div style="margin-left:210px;margin-right:180px;background:white;border:solid 1px #DDD;border-radius:5px;-moz-border-radius:5px;-webkit-border:5px;">
			<div class="artical_content">
			 <div class="artical_title">${article.title}</div>	
			 <div class="artical_source"><#if (article.source)??>source : ${article.source}</#if> ${article.createDate?string("yyyy-MM-dd")}</div>
             <img src="${base}/template/images/ad_300.jpg" width="300" height="250" align="texttop" style="float:left;margin:0 10px 10px 0;" />
			  ${article.visitContent}
            </div>
			<!--end:artical_content-->
			<form action="${base}${search}/comment" name="replay" method="post">
	            <div class="reply">
	            	<div class="reply_title">Leave a Reply</div>
	                <div class="reply_word">Your email address will not be published.Required fields are marked <span class="red">*</span> </div>
	            	<p>Name<span class="red">*</span></p>
	                <p><input type="text" name="member.name" class="text03" /></p>
	                <p>Email<span class="red">*</span></p>
	                <p><input type="text" name="member.email" class="text03" /></p>
	                <p>Comment</p>
	                <p><textarea class="text_area" name="content"></textarea></p>
	                <div class="reply_word">You may use some HTML tags and attributes</div>
	            	<div><input type="button" name="sub" class="btn_blue" value="Post Comment"/></div>
	            </div>
            </form>
            <!--end:reply-->
            <div class="replay_content"></div>          
		</div>
		<!--end:sortbar & catelog_shaixuan & page-->        
        <div class="clear"></div>
    </div>   
    <!--end:wrapper_2-->
     <#include "footer.ftl">   
    <!--end:bottom-->
</body>
<script id="comment" type="text/x-jquery-tmpl">
  <li>
	<p>
     <span class="floatr comment_time"><#noparse>${createDate}</#noparse></span>
     <span class="username"><#noparse>${name}</#noparse></span>
	</p>
    <div class="clear"></div>
	 <p><span class="Quotes">"</span><#noparse>${content}<span class="Quotes">"</span></#noparse></p>
  </li>
</script>
</html>